<template>
    <div class="uc-table">
        <div :class="border?'border-container':'container'">
            <div class="other-box">
                <slot name="otherBox"></slot>
            </div>
            <div class="handle-box">
                <el-form :inline="true" :model="searchForm">
                    <slot name="searchForm"></slot>
                </el-form>
            </div>
            <el-table :data="data" v-loading="loading" :size="size"
                      :element-loading-text="loadingText" :stripe="stripe"
                      element-loading-spinner="el-icon-loading" :cell-class-name="cellClassName"
                      :border="tableBorder" style="width: 100%" v-bind="$attrs" v-on="$listeners" :row-class-name="tableRowClassName">
                <slot name="columns"></slot>
            </el-table>
            <div v-if="pageable" :style="'text-align:'+position+';margin-top:20px'">
                <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,20,50]" :page-size="pageSize" :current-page="currentPage" :layout="layout" :total="pageTotal" background></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {mapGetters} from "vuex";
import {getTableData} from "@/api/common";

export default {
    name: "ucTable",
    inheritAttrs: false,
    props: {
        pageable: {
            type: Boolean,
            default: true
        },
        stripe:{
            type: Boolean,
            default: true
        },
        pageSize: {
            type: Number,
            default: 10
        },
        searchForm:{
            type: Object,
            default: ()=>{}
        },
        tableRowClassName:{
            type: Function,
            default: ()=>{}
        },
        cellClassName:{
            type: Function,
            default: ()=>{}
        },
        url: {
            type: String,
            required: true
        },
        size:{
            type: String,
            default: "mini"
        },
        border:{
            type:Boolean,
            default:false
        },
        loadingText:{
            type:String,
            default:'拼命加载中...'
        },
        layout:{
            type:String,
            default:'total,sizes,prev, pager, next'
        },
        position:{
            type:String,
            default:'right'
        },
        tableBorder:{
            type:Boolean,
            default:false
        },
        name:{
            type:String,
            default:'数据'
        }
    },
    data() {
        return {
            data: [],
            pageTotal: 0,
            pageNo: 1,
            loading:true,
            currentPage:1,
        }
    },
    computed:{
        ...mapGetters([

        ]),
    },
    created() {
        this.getTableData();
    },
    methods: {
        //获取数据
        getTableData(val) {
            this.loading = true
            //判断是否需要分页数据
            if (this.pageable) {
                this.searchForm.pageNum = val==1?1:this.pageNo;
                this.searchForm.pageSize= this.pageSize
            }
            getTableData(this.url,this.searchForm).then(res=>{
                this.loading = false
                if (this.pageable) {
                    this.pageTotal = res.data.total;
                    this.data = res.data.list;
                }else{
                    this.data = res.data;
                }
                // this.$notify({
                //     title: '成功',
                //     message: "获取"+this.name+res.msg,
                //     type: 'success'
                // });
            }).catch(error=>{
                this.loading = false
                console.log(error)
                if (error.code==401){
                    let view = {
                        fullPath: this.$route.path,
                        path: this.$route.path,
                        name: this.$route.name,
                        meta: { ...this.$route.meta }
                    }
                    this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
                        this.$router.push("/error/401")
                    })
                }else {
                    this.$notify({
                        title: '失败',
                        message: "加载数据失败",
                        type: 'error'
                    });
                }
            })
        },
        // 分页导航
        handleCurrentChange(val) {
            this.pageNo = val;
            this.currentPage=val
            this.getTableData();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.pageNo = 1
            this.currentPage=1
            this.getTableData();
        },

    },
    watch:{
        //监听总条数，当删除某一页最后一条 跳转前一页
        pageTotal(){
            if(this.pageTotal==(this.pageNo-1)*this.pageSize&& this.pageTotal!=0) {
                this.pageNo -= 1;
                this.getData();
            }
        }
    }
}

</script>

<style scoped lang="scss">
.uc-table{
    width: 100%;
    font-size: 14px;
}
.border-container{
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.container {
    padding: 10px;
    background: #fff;
}

.other-box{
    margin-bottom: 10px;
}

.handle-box {
    .el-form{
        .el-form-item{
            .el-input{
                margin-right: 10px;
                width: 200px;
            }
        }
    }
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 200px;
    display: inline-block;
}
.el-table .success-row {
    background: #0bb20c;
}
</style>